<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<script src="assets/js/jquery.min.js"></script>
		<link rel="stylesheet" href="assets/plyr/plyr.css" />
	</head>
	<body>

		<button class="clickme" style="font-size:2em">Change media</button>

		<div class="player-container"></div>


		<script src="assets/plyr/plyr.min.js"></script>
		<script type="text/javascript">
			var player=null; // ensure global access later

			function getYoutubeId(url){
				// source: https://stackoverflow.com/a/8260383
				// TODO: Add other video providers as well, such as Vimeo.
				var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
				var match = url.match(regExp);
				return (match&&match[7].length==11)? match[7] : false;
			}

			function getPlyrHtml(videourl) {
				var videoId=getYoutubeId(videourl);
				// TODO: Adopt to other video providers as well, such as Vimeo.
				return '			<div class="plyr__video-embed" id="player"> \
				<iframe src="https://www.youtube.com/embed/'+videoId+'?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" \
					allowfullscreen \
					allowtransparency \
					allow="autoplay" \
				></iframe> \
			</div>';
			}

			$(function(){
				$('.player-container').html(getPlyrHtml('https://www.youtube.com/watch?v=bTqVqk7FSmY'));
				player = new Plyr(document.getElementById('player'));
			});

			$('.clickme').click(function(){
				player.source = {
					type: 'video',
					sources: [
						{
							src: 'C0DPdy98e4c',
							provider: 'youtube',
						},
					],
				};
			});

		</script>
	</body>
</html>